<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试页面1</title>
  <link rel="stylesheet" href="./css/text.css">
  <STyle>
    body {
      background-color: #00eaff;
    }

    .tilte {
      font-family: sans-serif;
      font-size: 10rem;
      color: chocolate;
      font-weight: 900;
      cursor: pointer;
    }

    .tilte span {
      font-size: 10rem;
      color: aliceblue;
    }
  </STyle>


</head>

<body>

  <div class="loading">
    <svg viewbox='0 0 50 50'>
        <circle r='25' cx='25' cy='25'></circle>
    </svg>
    <p>LOADING</p>
</div>
<p onclick="loading.in('./2.html')" class="title">1<span></span>
</p>

  <script src="./js/vue.js"></script>

  <script>
    
  </script>

</body>
<script>
  const loading = {
      container: document.querySelector(".loading"),
      in(target) {
          this.container.classList.remove("loading_out");
          setTimeout(() => {
              window.location.href = target;
          }, 1000)
      },
      out() {
          this.container.classList.add("loading_out");
      }
  };
  window.addEventListener("load", () => {
      loading.out();
  })
</script>
</html>